<template>
  <div>
    <!-- 布局容器 -->
    <el-container>
      <!-- 头部导航栏 -->
      <el-header>
        <!-- 头像 -->
        <el-image
          style="width: 3rem; height: 100%"
          :src="url"
          :fit="'fill'"
        ></el-image>
        <h2 style="margin: 0 5px; color: white">合肥市基础地理信息共享平台</h2>
        <!-- 用户头像 -->

        <!-- 日历图标 -->
        <span
          id="dateIcon"
          @click="showDate"
        ><svg
            t="1649126630440"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2212"
          >
            <path
              d="M725.333333 170.666667h74.709334C864.853333 170.666667 917.333333 223.189333 917.333333 288.096V799.893333C917.333333 864.757333 864.832 917.333333 800.042667 917.333333H223.957333C159.146667 917.333333 106.666667 864.810667 106.666667 799.904V288.106667C106.666667 223.242667 159.168 170.666667 223.957333 170.666667H298.666667v-32a32 32 0 0 1 64 0v32h298.666666v-32a32 32 0 0 1 64 0v32z m0 64v32a32 32 0 0 1-64 0v-32H362.666667v32a32 32 0 0 1-64 0v-32h-74.709334A53.354667 53.354667 0 0 0 170.666667 288.096V799.893333A53.301333 53.301333 0 0 0 223.957333 853.333333h576.085334A53.354667 53.354667 0 0 0 853.333333 799.904V288.106667A53.301333 53.301333 0 0 0 800.042667 234.666667H725.333333z m-10.666666 224a32 32 0 0 1 0 64H309.333333a32 32 0 0 1 0-64h405.333334zM586.666667 618.666667a32 32 0 0 1 0 64H309.333333a32 32 0 0 1 0-64h277.333334z"
              p-id="2213"
            ></path>
          </svg></span>
        <span id="userInfo">
          <div id="userIcon">{{$store.state.user.username.split("")[0]}}</div>
          <span style="marginRight: 20px">{{ $store.state.user.username }}</span>
        </span>

        <div
          id="dateTable"
          v-show="isShow"
        >
          <el-calendar v-model="date" />
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <!-- 侧边菜单栏 -->
          <left-menu></left-menu>
        </el-aside>
        <!-- 试图区 -->
        <el-main>
          <router-view #default="{ Component }">
            <transition>
              <keep-alive>
                <component
                  :is="Component"
                ></component>
              </keep-alive>
            </transition>
          </router-view>
        </el-main>
      </el-container>
    </el-container>

    <!-- 聊天室图标 -->
   <communication></communication>
  </div>
</template>

<script>
import { ref, reactive, nextTick } from "vue";
import leftMenu from "@/components/leftMenu.vue";
import { useStore } from "vuex";
import communication from "@/components/communication.vue";

export default {
  name: "home",
  setup() {
    const url = require("../assets/image/地球.png");
    const userIcon = require("../assets/image/地球.png");
    const store = useStore();
    const date = reactive(new Date());
  
    const loading = ref(true);
    let isShow = ref(false);
    let showDate = function () {
      isShow.value = !isShow.value;
    };

   

    store.state.user.username = window.sessionStorage.getItem("username");

    return {
      userIcon,
      url,
      date,
      isShow,
      showDate,
    };
  },
  components: {
    leftMenu,
    communication,
  },
};
</script>

<style lang="less" scoped>
.el-header {
  width: 100vw;
  height: 3rem;
  background-color: #12afe3;
}
// .el-aside {
//   height: 95vh;
// }

.el-header {
  display: flex;
  align-items: center;
}

.el-main {
  padding: 0;
  margin: 0;
}
#userInfo {
  display: flex;
  position: absolute;
  right: 0px;
  color: white;
  align-items: center;
  #userIcon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: black;
    color: white;
    font-size: 1rem;
    text-align: center;
    line-height: 38px;
    margin-right: 5px;
    cursor: pointer;
  }
}
#dateTable {
  width: 20rem;
  height: 20rem;
  position: absolute;
  right: 0;
  top: 3rem;
  z-index: 20;
}

#dateIcon {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  position: absolute;
  right: 10rem;
  cursor: pointer;
}

.icon {
  width: 1rem;
  height: 1rem;
}


</style>
